<template>
<div>
   <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    </el-breadcrumb>
  <!-- 卡片视图区域 -->
  <el-card>
    <!-- 学生表 -->
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别">
    </el-table-column>
     <el-table-column
      prop="id"
      label="学号">
    </el-table-column>
    <el-table-column
      prop="department"
      label="学院">
    </el-table-column>
    <el-table-column
      prop="major"
      label="专业">
    </el-table-column>
  </el-table>
  </el-card>
  </div>
   </template>

<script>
export default {
  data () {
    return {
      tableData: []
    }
  },
  created () {
    this.getstudents()
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    async getstudents () {
      const { data: res } = await this.$http.get('student/queryAll')
      this.tableData = res
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
